@import 'nib/border'
@import 'nib/clearfix'
@import 'nib/color-image'
@import 'nib/image'
@import 'nib/overflow'
@import 'nib/positions'
@import 'nib/text'
@import 'nib/size'

@require './icons.styl'

rupture.scale = 0 568px 690px 840px 1420px
rupture.scale-names = 'phone' 'small-tablet' 'tablet' 'desktop' 'largescreen'

color_red = #B80000
color_green = #469269
color_black = #000
color_orange = #F8AB47
color_orange_light = #FDC073

link_color = #0059B2
light_link_color = #3B86C4
alternate_link_color = #2974BB // there are some a bit lighter links that need separate color
link_color_new = #3A8AED
link_hover_color = #BA1000
link_visited_color = #551A8B
navigation_link_color = #696664

text_yellow = #FFFED7
text_grey_dark = #373636
text_courses_dark = #404040

color = #333
code_color = #333
gray_color = #666
light_gray_color = #999
ultralight_gray_color = #E1E1E1
separator_color = #DFDFD0
secondary_color = #B20600
hover_color_correction = 25%

background = #fff
background_light = #eee
background_blocks = #F5F2F0
background_yellow_light = #F6F4EB
background_yellow_dark = #EDE9D8

size = 14px
lineheight = 20px

// System variables

// Typefaces
font = BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica,Arial, sans-serif
secondary_font = BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica,Arial, sans-serif
fixed_width_font = 'Consolas', 'Lucida Console', 'Menlo', 'Monaco', monospace
font_en = -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif

// Font sizes
font_size_xs = 12px
font_size_s = 14px
font_size_m = 16px
font_size_l = 20px
font_size_xl = 24px
font_size_xxl = 24px

// Line heights
line_height_xs = 18px
line_height_s = 20px
line_height_m = 22px
line_height_l = 24px
line_height_xl = 32px
line_height_xxl = 40px

// Spacing Outer Vertical (mostly margins buttom/top to keep the vertical rythm)
outer_vertical_xs = 8px
outer_vertical_s = 12px
outer_vertical_m = 16px
outer_vertical_l = 24px
outer_vertical_xl = 32px
outer_vertical_xxl = 64px

// Spacing Outer Horizontal (mostly margins right/left to keep the horizontal rythm)
outer_horizontal_xxs = 2px
outer_horizontal_xs = 4px
outer_horizontal_s = 8px
outer_horizontal_m = 16px
outer_horizontal_l = 24px
outer_horizontal_xl = 32px
outer_horizontal_xxl = 64px

// Spacing Inner Square (good for cards, message boxes, footers etc)
inner_square_s = 8px
inner_square_m = 16px
inner_square_l = 24px
inner_square_xl = 32px
inner_square_xxl = 64px

// Spacing Inner Landscape (good for buttons, pills, menus, data tables etc)
inner_landscape_s = 12px 8px
inner_landscape_m = 16px 12px
inner_landscape_l = 24px 16px

// Spacing Inner Portrait (mostly used for forms)
inner_portrait_s = 4px 8px
inner_portrait_m = 8px 16px
inner_portrait_l = 16px 32px

sidebar_width = 250px

animation_duration = .2s

// высота блока с сообщением над панелью навигации
top_notification_height = 60px

// страницы с 1 колонкой для чтения
max_width = 800px

// страницы, где несколько колонок
max_width_wide = 1000px

max_width_extra_wide = 1200px

margin_block = 56px

media_step_1 = 1120px
media_step_2 = 1170px
media_step_3 = 1220px
largescreen  = 1420px

tablet_medium = '(max-width: 890px)'
tablet = '(max-width: 840px)'
phone = '(max-width: 568px)'
short_window = '(max-height: 600px)'

footer_height = 70px
footer_margin_top = 30px

sitetoolbar_color = #8B8987
sitetoolbar_secondary_bg = #F5F2F0
sitetoolbar_secondary_link = #498CBE

$yellow-border
    border-radius 10px
    border 3px solid #F2E7B3

@require "../mixins/*"
